<template>
  <div class="sftp-container">
    <!-- 文件浏览器主区域 -->
    <div v-if="isConnecting" class="file-browser">
      <!-- 左侧：文件列表区域 -->
      <div class="file-list-section">
        <!-- 路径导航 -->
        <div class="path-navigation">
          <button
              :disabled="currentPath === '/'"
              class="btn-navigate-up"
              @click="navigateUp"
          >
            返回上一级
          </button>
          <div class="current-path-display">
            <span class="path-label">当前路径:</span>
            <span class="path-value">{{ currentPath }}</span>
          </div>
          <div class="search-box">
            <input
                v-model="searchKeyword"
                class="search-input"
                placeholder="搜索文件名..."
                type="text"
            />
            <button
                v-if="searchKeyword"
                class="clear-search"
                @click="searchKeyword = ''"
            >
              ×
            </button>
          </div>
        </div>

        <!-- 文件列表 -->
        <div class="file-list-container">
          <div class="file-list-header">
            <div
                class="header-column header-name"
                @click="handleSort('name')"
            >
              名称
              <span v-if="sortField === 'name'" class="sort-icon">
                {{ sortOrder === 'asc' ? '↑' : '↓' }}
              </span>
            </div>
            <div
                class="header-column header-size"
                @click="handleSort('size')"
            >
              大小
              <span v-if="sortField === 'size'" class="sort-icon">
                {{ sortOrder === 'asc' ? '↑' : '↓' }}
              </span>
            </div>
            <div
                class="header-column header-date"
                @click="handleSort('lastModified')"
            >
              最后修改日期
              <span v-if="sortField === 'lastModified'" class="sort-icon">
                {{ sortOrder === 'asc' ? '↑' : '↓' }}
              </span>
            </div>
          </div>

          <div class="file-list-wrapper">
            <template v-if="loading">
              <div class="loading-indicator">
                <div class="loading-spinner"></div>
                <span>加载中...</span>
              </div>
            </template>
            <template v-else-if="sortedItems.length > 0">
              <ul class="file-list">
                <li
                    v-for="item in sortedItems"
                    :key="item.name"
                    :class="{
                    'file-item': true,
                    'folder-item': item.folderFlag,
                    'file-item-selected': selectedItem && selectedItem.name === item.name
                  }"
                    @click="handleItemClick(item)"
                    @dblclick="handleItemDblClick(item)"
                >
                  <div class="item-icon">
                    <img
                        v-if="item.folderFlag"
                        :src="folderIcon"
                        alt="文件夹"
                        class="icon"
                    >
                    <img
                        v-else
                        :alt="item.name"
                        :src="getFileIcon(item.name)"
                        class="icon"
                    >
                  </div>
                  <div class="item-name">{{ item.name }}</div>
                  <div v-if="!item.folderFlag" class="item-size">
                    {{ formatFileSize(item.size) }}
                  </div>
                  <div v-if="!item.folderFlag" class="item-date">
                    {{ formatDate(item.lastModified) }}
                  </div>
                </li>
              </ul>
            </template>
            <template v-else>
              <div class="empty-folder">
                <p>当前目录为空</p>
              </div>
            </template>
          </div>
        </div>
      </div>

      <!-- 右侧：操作面板区域 -->
      <div class="action-panel">
        <h3>操作</h3>
        <div class="action-buttons">
          <!-- 默认操作 -->
          <div class="base-action-button">
            <button
                class="action-button"
                @click="refreshFileList"
            >
              <span class="icon">
                <img alt="刷新" class="icon-img" src="../../../../asserts/Fresh.svg">
              </span> 刷新
            </button>
          </div>

          <div v-if="sortedItems.length > 0 && selectedItem" class="selected-item-actions">
            <!-- 选中项目的操作 -->
            <button
                v-if="selectedItem.folderFlag"
                class="action-button"
                @click="enterFolder(selectedItem)"
            >
              <span class="icon">
                <img alt="进入文件夹" class="icon-img" src="../../../../asserts/documentTypeSvg/folder.svg">
              </span> 进入文件夹
            </button>
            <button v-if="selectedItem" class="action-button" @click="showRenameDialog = true">
              <span class="icon">
                <img alt="重命名" class="icon-img" src="../../../../asserts/rename.svg">
              </span> 重命名
            </button>
            <button v-if="selectedItem" class="action-button danger" @click="showDeleteDialog = true">
              <span class="icon">
                <img alt="删除" class="icon-img" src="../../../../asserts/delete.svg">
              </span> 删除
            </button>
            <button
                v-if="!selectedItem.folderFlag"
                class="action-button"
                @click="previewFile"
            >
              <span class="icon">
                <img alt="预览" class="icon-img" src="../../../../asserts/preview.svg">
              </span> 预览
            </button>
            <button
                v-if="!selectedItem.folderFlag"
                class="action-button"
                @click="downloadFile"
            >
              <span class="icon">
                <img alt="下载" class="icon-img" src="../../../../asserts/download.svg">
              </span> 下载
            </button>
          </div>

          <div v-if="!selectedItem" class="no-selection-message">
            请选择一个文件或文件夹以查看更多操作
          </div>
        </div>
      </div>
    </div>

    <!-- 未连接状态提示 -->
    <div v-else-if="connectionStatus !== 'connecting'" class="not-connected">
      <p>请先连接到SFTP服务器</p>
      <!--      <button class="connect-button" @click="connectToServer">-->
      <!--        <span class="icon">-->
      <!--          <img alt="连接" class="icon-img" src="../../../../asserts/documentTypeSvg/folder.svg">-->
      <!--        </span> 连接SFTP服务器-->
      <!--      </button>-->
    </div>

    <!-- 重命名确认对话框 -->
    <div v-if="showRenameDialog" class="modal">
      <div class="modal-content">
        <h3>重命名</h3>
        <input
            v-model="newItemName"
            :placeholder="selectedItem?.name"
            type="text"
            @keyup.enter="confirmRename"
        >
        <div class="modal-actions">
          <button @click="cancelRename">取消</button>
          <button @click="confirmRename">确定</button>
        </div>
      </div>
    </div>

    <!-- 删除确认对话框 -->
    <div v-if="showDeleteDialog" class="modal">
      <div class="modal-content">
        <h3>确认删除</h3>
        <p>确定要删除 "{{ selectedItem?.name }}" 吗？</p>
        <div class="modal-actions">
          <button @click="cancelDelete">取消</button>
          <button class="danger" @click="confirmDelete">删除</button>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import {onBeforeUnmount, ref, computed, onMounted, defineEmits} from "vue";
import {message} from "@/utils/ElmessasgeUtils";
import type {FileItem} from "@/type/documentManager/FileItem";
import folderIcon from "@/asserts/documentTypeSvg/folder2.svg";
import type {ConnectServerInfo} from "@/type/webShell/connectServerInfo";
import {defineProps} from "vue";
import {formatDate, formatFileSize, getFileIcon} from "@/views/documentManager/components/ts/FileBrowser";
import {WebSocketClient} from "@/utils/websocketUtil";
import type {WebSocketMessage} from "@/type/utils/websocket";

interface Props {
  formData: ConnectServerInfo;
}

const props = defineProps<Props>();
const emit = defineEmits<{
  'update-status': [status: string]
}>();

const terminalSocket = new WebSocketClient('ws://' + location.host + '/WebShell/socket/webSFTP-connect')
terminalSocket.on("message", async (msg: any) => {
  // 收到后端消息后， 刷新文件列表展示
  try {
    if (typeof msg === "string") {
      let jsonData = JSON.parse(msg);
      let msgType: string = jsonData.msgType
      console.log("收到后台消息， 消息类型", msgType)

      if (msgType === 'fileList') {
        updateFileList(jsonData)
      } else if (msgType === 'sftpDownloadStart') {
        startSFTPDownload(jsonData)
      } else if (msgType === 'sftpDownloadProgress') {
        updateProgress(jsonData)
      } else if (msgType === 'sftpDownloadEnd') {
        // 关键改进：等待一小段时间确保所有二进制数据都已接收
        setTimeout(() => endSFTPDownload(jsonData), 200);
      } else if (msgType === 'sftpDownloadError') {
        message("下载出现错误", 'error');
      }
    } else {
      // 二进制分片
      if (msg instanceof ArrayBuffer) {
        handleBinaryData(msg)
      } else if (msg instanceof Blob) {
        await handleBlobData(msg)
      }
    }

  } catch (e) {
    console.error("解析服务器消息失败", e);
  }
});

terminalSocket.on("open", () => {
  console.log("websocket 连接已建立")

  // 发送连接SFTP 消息
  let payload: WebSocketMessage = {
    data: {
      host: props.formData.serverIp,
      port: props.formData.port,
      username: props.formData.serverUsername,
      password: props.formData.serverPassword,
    },
    type: "connectSftp",
  }

  terminalSocket.send(payload)

  connectionStatus.value = 'connecting'
  isConnecting.value = true;
});




const isConnecting = ref(false)
const connectionStatus = ref('disconnected')

// 文件列表相关状态
const currentPath = ref('/')
const fileItems = ref<FileItem[]>([])
const loading = ref(false)
const selectedItem = ref<FileItem | null>(null)
const searchKeyword = ref('')
const sortField = ref('name')
const sortOrder = ref('asc')

// 对话框状态
const showRenameDialog = ref(false)
const showDeleteDialog = ref(false)
const newItemName = ref('')

// ------------ sftp 下载 相关变量 ---------
let downloading = false;
let fileName = "";
const chunks: Uint8Array[] = [];
let expectedTotalBytes = 0
// 下载进度条变量
const downloadProgress = ref(0);

function updateFileList(jsonData: any) {
  loading.value = false;

  // 解析文件列表数据
  fileItems.value = jsonData.data.map((item: any) => ({
    name: item.name,
    folderFlag: item.folderFlag,
    size: item.size || 0,
    lastModified: new Date(item.lastModified)
  }));
}

// 开始下载文件
function startSFTPDownload(jsonData: any) {
  downloading = true;
  fileName = jsonData.fileName;
  chunks.length = 0;
  expectedTotalBytes = jsonData.data.totalBytes // 预期下载文件的 大小
  // 重置进度条
  downloadProgress.value = 0;

  message("开始下载")
  console.log("总大小: ", jsonData.data.totalBytes)
  console.log("分片大小: ", jsonData.data.chunkBytes)
}

function updateProgress(jsonData: any) {
  // 更新进度条值
  downloadProgress.value = jsonData.data.percent || 0

  // 保留原有的日志输出
  console.log("progress", jsonData.data.percent)
  console.log("sentBytes", jsonData.data.sentBytes)
  console.log("chunks.len", chunks.length)
}

function endSFTPDownload(jsonData: any) {
  if (!downloading) {
    return;
  }
  // 下载结束，重置进度条
  downloadProgress.value = 100;
  setTimeout(() => {
    downloadProgress.value = 0;
  }, 1000);
  // 合并并保存
  const totalLen = chunks.reduce((sum, c) => sum + c.length, 0);
  console.log("totalLen", totalLen)
  console.log("expectedTotalBytes", expectedTotalBytes);

  // 文件完整性检查
  if (expectedTotalBytes > 0 && Math.abs(totalLen - expectedTotalBytes) > 1024) {
    console.warn(`文件大小不匹配: 期望 ${expectedTotalBytes}, 实际 ${totalLen}`);
    message(`警告: 文件大小可能不完整 (差异: ${Math.abs(totalLen - expectedTotalBytes)} 字节)`, 'warning');
  }

  const merged = new Uint8Array(totalLen);
  let offset = 0;

  for (const c of chunks) {
    merged.set(c, offset);
    offset += c.length;
  }

  const blob = new Blob([merged.buffer], {type: "application/octet-stream"});
  downloadBlob(blob, fileName || "download.bin");


  message("下载结束");
}

function handleBinaryData(binaryData: any) {
  if (downloading) {
    let data = new Uint8Array(binaryData)
    chunks.push(data);
    console.log("msg.data.length", data.length);
  } else {
    // 未处于下载态（可能乱序或误发），可选择忽略或缓存
    message("收到二进制但未处于下载状态，忽略该帧", 'error');
  }
}

async function handleBlobData(binaryData: Blob) {
  if (!downloading) {
    message("收到Blob数据但未处于下载状态，忽略该帧", 'error');
    return;
  }

  const buf = await binaryData.arrayBuffer();
  handleBinaryData(buf)
}

// 更可靠的下载方法
function downloadBlob(blob: Blob, fileName: string) {
  try {
    // 现代浏览器下载API
    if ('download' in document.createElement('a')) {
      const link = document.createElement('a');
      const url = URL.createObjectURL(blob);

      link.href = url;
      link.download = fileName;
      link.style.display = 'none';

      // 使用延迟执行确保正确触发下载
      setTimeout(() => {
        document.body.appendChild(link);
        link.click();
        setTimeout(() => {
          document.body.removeChild(link);
          URL.revokeObjectURL(url);
        }, 100);
      }, 0);
    } else {
      // 兼容旧浏览器
      window.navigator.msSaveBlob(blob, fileName);
    }
  } catch (e) {
    console.error('触发下载失败:', e);
    throw e;
  }
}

// 排序后的文件列表
const sortedItems = computed(() => {
  // 先进行搜索过滤
  let filteredItems = [...fileItems.value];

  if (searchKeyword.value.trim()) {
    const keyword = searchKeyword.value.trim().toLowerCase();
    filteredItems = filteredItems.filter(item =>
        item.name.toLowerCase().includes(keyword)
    );
  }

  // 然后进行排序
  return filteredItems.sort((a, b) => {
    let compareResult = 0;

    // 文件夹始终排在前面
    if (a.folderFlag && !b.folderFlag) return -1;
    if (!a.folderFlag && b.folderFlag) return 1;

    // 根据当前排序字段比较
    if (sortField.value === 'name') {
      compareResult = a.name.localeCompare(b.name);
    } else if (sortField.value === 'size') {
      compareResult = a.size - b.size;
    } else if (sortField.value === 'lastModified') {
      compareResult = a.lastModified.getTime() - b.lastModified.getTime();
    }

    // 应用排序顺序
    return sortOrder.value === 'asc' ? compareResult : -compareResult;
  });
});


// 排序处理
const handleSort = (field: string) => {
  if (sortField.value === field) {
    sortOrder.value = sortOrder.value === 'asc' ? 'desc' : 'asc';
  } else {
    sortField.value = field;
    sortOrder.value = 'asc';
  }
};

// 加载指定路径的文件列表
const loadFileList = (path: string) => {
  if (isConnecting.value) {
    loading.value = true;
    currentPath.value = path;
    terminalSocket.send({
          type: 'sftpPath',
          data: {
            path: path
          }
        }
    )
  } else {
    message("WebSocket未连接，请先连接服务器", 'warning');
  }
}

// 进入文件夹
const enterFolder = (item: FileItem) => {
  console.log('enterFolder', item);
  console.log(currentPath.value);
  if (item.folderFlag) {
    const newPath = currentPath.value === '/'
        ? `/${item.name}`
        : `${currentPath.value}/${item.name}`;
    loadFileList(newPath);
  }
}

// 返回上一级目录
const navigateUp = () => {
  if (currentPath.value !== '/') {
    const lastSlashIndex = currentPath.value.lastIndexOf('/');
    const parentPath = lastSlashIndex === 0 ? '/' : currentPath.value.substring(0, lastSlashIndex);
    loadFileList(parentPath);
  }
}

// 处理文件/文件夹点击
const handleItemClick = (item: FileItem) => {
  selectedItem.value = item;
}

// 处理文件/文件夹双击
const handleItemDblClick = (item: FileItem) => {
  if (item.folderFlag) {
    enterFolder(item);
  } else {
    // 文件双击实现预览功能
    previewFile();
  }
}


// 刷新文件列表
const refreshFileList = () => {
  loadFileList(currentPath.value);
}

// 预览文件
const previewFile = () => {
  if (!selectedItem.value || selectedItem.value.folderFlag) return;
  message(`正在预览文件: ${selectedItem.value.name}`, 'info');
  // 实际项目中可以实现具体的文件预览逻辑
}

// 下载文件
const downloadFile = () => {
  if (!selectedItem.value || selectedItem.value.folderFlag) return;
  message(`正在下载文件: ${selectedItem.value.name}`, 'info');
  // 发送下载请求到服务器
  terminalSocket.send({
    type: 'sftpDownload',
    data: {
      path: currentPath.value,
      fileName: selectedItem.value.name
    }
  });
}

// 重命名文件/文件夹
const confirmRename = () => {
  if (!selectedItem.value || !newItemName.value.trim()) return;
  // 发送下载请求到服务器
  terminalSocket.send({
    type: 'sftpRename',
    data: {
      path: currentPath.value,
      oldName: selectedItem.value.name,
      newName: newItemName.value.trim()
    }
  });
  showRenameDialog.value = false;
  newItemName.value = '';
}

const cancelRename = () => {
  showRenameDialog.value = false;
  newItemName.value = '';
}

// 删除文件/文件夹
const confirmDelete = () => {
  if (!selectedItem.value) return;

  terminalSocket.send({
    type: 'sftpDelete',
    data: {
      path: currentPath.value,
      fileName: selectedItem.value.name,
      newName: newItemName.value.trim(),
      isFolder: selectedItem.value.folderFlag
    }
  });

  showDeleteDialog.value = false;
  selectedItem.value = null;
}

const cancelDelete = () => {
  showDeleteDialog.value = false;
}

onMounted(() => {
  terminalSocket.connect();
})

// 解除挂载前 关闭SFTP连接
onBeforeUnmount(() => {
  terminalSocket.close()
})

</script>

<style lang="scss" scoped>
.sftp-container {
  min-height: 100vh;
  background-color: #f5f7fa;
  padding: 20px;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}

.file-browser {
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  display: flex;
  height: calc(100vh - 160px);
}

.file-list-section {
  flex: 1;
  display: flex;
  flex-direction: column;
  border-right: 1px solid #ebeef5;
}

.path-navigation {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 24px;
  background-color: #f8fafd;
  border-bottom: 1px solid #ebeef5;
}

.btn-navigate-up {
  padding: 8px 16px;
  background: white;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.3s;
  font-size: 14px;
}

.btn-navigate-up:hover:not(:disabled) {
  border-color: #409eff;
  color: #409eff;
}

.btn-navigate-up:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.current-path-display {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
}

.path-label {
  font-size: 14px;
  color: #606266;
}

.path-value {
  font-size: 14px;
  font-weight: 500;
  color: #409eff;
  background-color: white;
  padding: 4px 8px;
  border-radius: 4px;
  border: 1px solid #ebeef5;
}

.search-box {
  position: relative;
  display: flex;
  align-items: center;
}

.search-input {
  padding: 8px 32px 8px 12px;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  font-size: 14px;
  width: 200px;
}

.search-input:focus {
  outline: none;
  border-color: #409eff;
}

.clear-search {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  font-size: 18px;
  cursor: pointer;
  color: #909399;
  padding: 0;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.file-list-container {
  display: flex;
  flex-direction: column;
  flex: 1;
  overflow: hidden;
}

.file-list-header {
  display: flex;
  padding: 12px 24px;
  background-color: #f5f7fa;
  border-bottom: 1px solid #ebeef5;
  font-weight: 600;
  color: #303133;
}

.header-column {
  display: flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
  transition: color 0.3s;
}

.header-column:hover {
  color: #409eff;
}

.header-name {
  flex: 1;
  min-width: 200px;
}

.header-size {
  width: 120px;
  text-align: right;
}

.header-date {
  width: 200px;
  text-align: right;
}

.sort-icon {
  font-size: 12px;
  color: #c0c4cc;
}

.file-list-wrapper {
  flex: 1;
  overflow-y: auto;
}

.file-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.file-item {
  display: flex;
  align-items: center;
  padding: 12px 24px;
  border-bottom: 1px solid #f0f4f8;
  transition: background-color 0.3s;
  cursor: pointer;
}

.file-item:hover {
  background-color: #f5f9ff;
}

.file-item-selected {
  background-color: #e3f2fd;
}

.folder-item .item-name {
  font-weight: 500;
}

.item-icon {
  width: 24px;
  margin-right: 12px;
  display: flex;
  align-items: center;
}

/* 文件列表图标样式 - 仅应用于文件列表项 */
.file-list .item-icon .icon {
  width: 20px;
  height: 20px;
}

.item-name {
  flex: 1;
  min-width: 200px;
  font-size: 14px;
  color: #303133;
}

.item-size {
  width: 120px;
  text-align: right;
  font-size: 13px;
  color: #909399;
}

.item-date {
  width: 200px;
  text-align: right;
  font-size: 13px;
  color: #909399;
}

.loading-indicator,
.empty-folder,
.not-connected {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 300px;
  color: #909399;
}

.loading-spinner {
  width: 30px;
  height: 30px;
  border: 3px solid #f3f3f3;
  border-top: 3px solid #409eff;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin-bottom: 12px;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

@keyframes pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
}

/* 操作面板样式 */
.action-panel {
  width: 280px;
  padding: 24px;
  overflow-y: auto;
}

.action-panel h3 {
  margin: 0 0 16px 0;
  color: #303133;
  font-size: 16px;
  font-weight: 600;
}

.action-buttons {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.base-action-button {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.selected-item-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid #ebeef5;
}

.action-button {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  background: white;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.3s;
  font-size: 14px;
  color: #303133;
  text-align: left;
}

.action-button:hover {
  border-color: #409eff;
  color: #409eff;
  background-color: #ecf5ff;
}

.action-button.danger {
  color: #f56c6c;
  border-color: #fbc4c4;
}

.action-button.danger:hover {
  background-color: #fef0f0;
  border-color: #f56c6c;
}

/* 右侧按钮图标样式 */
.icon {
  margin-right: 8px;
  display: inline-flex;
  align-items: center;
}

.icon-img {
  width: 16px;
  height: 16px;
  margin-right: 8px;
  flex-shrink: 0;
  vertical-align: middle;
}

/* 连接按钮样式 */
.connect-button {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 24px;
  margin-top: 20px;
  background: #409eff;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.3s;
  font-size: 16px;
  font-weight: 500;
  color: white;
  text-align: center;
  box-shadow: 0 2px 4px rgba(64, 158, 255, 0.3);
}

.connect-button:hover {
  background-color: #66b1ff;
  box-shadow: 0 4px 8px rgba(64, 158, 255, 0.4);
  transform: translateY(-1px);
}

.connect-button:active {
  transform: translateY(0);
  box-shadow: 0 2px 4px rgba(64, 158, 255, 0.3);
}

/* 响应式设计 */
@media (max-width: 1200px) {
  .form-row {
    flex-direction: column;
  }

  .file-list-container {
    height: calc(100vh - 400px);
  }
}

@media (max-width: 768px) {
  .sftp-container {
    padding: 10px;
  }

  .file-browser {
    flex-direction: column;
    height: auto;
  }

  .file-list-section {
    border-right: none;
    border-bottom: 1px solid #ebeef5;
  }

  .action-panel {
    width: 100%;
    padding: 15px;
  }

  .path-navigation {
    flex-wrap: wrap;
    padding: 12px;
  }

  .search-input {
    width: 100%;
  }

  .file-list-header,
  .file-item {
    padding: 12px;
  }

  .header-date,
  .item-date {
    display: none;
  }

  .file-list-container {
    height: 400px;
  }
}
</style>